<template>
  <div class="flex-column topo-wrap w-100 h-100">
    <visView
      id="businessTopo"
      ref="businessTopo"
      :nodes="nodes"
      :edges="edges"
      @hoverEdge="hoverEdge"
      @selectEdge="selectEdge"
      @selectNode="selectNode"
      @dragStart="dragStart"
    />
    <!-- 关系线hover时显示 -->
    <el-card v-if="hoverProp" class="edgesTooltip" :style="hoverPosition">
      <ul>
        <li>纤芯：{{ fiberInfo.fiberNum }}</li>
        <li>业务纤芯：{{ fiberInfo.bizNum }}</li>
        <li>空闲纤芯：{{ fiberInfo.idleNum }}</li>
        <li>业务故障纤芯：{{ fiberInfo.damage }}</li>
        <li>备用纤芯：{{ fiberInfo.backUp }}</li>
        <li>进行中纤芯：{{ fiberInfo.processNum }}</li>
      </ul>
    </el-card>
    <!-- 点击节点、光缆事件弹窗 -->
    <el-card
      v-if="clickProp !== ''"
      class="edgesTooltip"
      :style="clickPosition"
    >
      <!-- 关系线click时显示 -->
      <ul v-if="clickProp === 'selectEdge'" class="edgesButton">
        <li>
          <el-button type="primary" @click="cableDetailClick"
            >光缆详情</el-button
          >
        </li>
      </ul>
      <!-- 节点click时显示 -->
      <ul v-if="clickProp === 'selectNode'" class="nodesButton">
        <li>
          <el-button type="primary" @click="associatedBusinessClick('NODE')"
            >关联业务</el-button
          >
        </li>
        <li>
          <el-button type="primary" @click="faultBusinessClick('NODE')"
            >故障业务</el-button
          >
        </li>
        <li>
          <el-button type="primary" @click="associatedRouteClick('NODE')"
            >关联路由</el-button
          >
        </li>
        <li>
          <el-button type="primary" @click="faultRouteClick('NODE')"
            >故障路由</el-button
          >
        </li>
        <li>
          <el-button type="primary" @click="deviceClick">设备详情</el-button>
        </li>
        <li>
          <el-button type="primary" @click="openClick">智能开通</el-button>
        </li>
      </ul>
    </el-card>
    <!-- 光缆端口详情 -->
    <component
      :is="cableDetailShow ? 'CableDetail' : ''"
      ref="CableDetail"
      :node="currentEdge"
      :dialog-visible.sync="cableDetailShow"
    />
    <!-- 故障业务 -->
    <component
      :is="associatedFaultBusinessShow ? 'FaultBusiness' : ''"
      ref="FaultBusiness"
      :dialog-visible.sync="associatedFaultBusinessShow"
      :node="currentNode"
      @restore="restoreFn"
    />
    <!-- 设备拓扑 -->
    <component
      :is="deviceDetailShow ? 'DeviceTopo' : ''"
      ref="deviceTopo"
      :dialog-visible.sync="deviceDetailShow"
      :node="currentNode"
      @selectDevice="selectDevice"
    />
  </div>
</template>
<script>
import { formatEdges, formatNodes } from "@/components/vis-view/js/format";
import mixin from "@/components/vis-view/js/mixin";
import topoData from "./data/topo.js";
import visView from "@/components/vis-view";
import CableDetail from "./components/CableDetail";
import FaultBusiness from './components/FaultBusiness'
import DeviceTopo from './components/DeviceTopo'
export default {
  components: {
    visView,
    CableDetail,
    FaultBusiness,
    DeviceTopo
  },
  mixins: [mixin],
  data() {
    return {
      nodes: [],
      edges: [],
      operateType: '',
      bizData: null,
      currentDevice: {}
    };
  },
  methods: {
    // 智能恢复
    restoreFn(data) {
      this.clickProp = "";
      this.bizData = data.bizData;
      this.operateType = data.operateType;
    },
    // 拖拽隐藏弹窗
    dragStart() {
      this.clickProp = "";
    },
    // 业务开通点击
    openClick() {
      this.operateType = "open";
      this.deviceDetailShow = true;
    },
    // 设备详情
    selectDevice(obj) {
        this.devicePortShow = true
        this.currentDevice = obj
      },
  },
  mounted() {
    const { nodes, edges } = topoData;
    this.nodes = formatNodes(nodes);
    this.edges = formatEdges(edges);
    const myNetworkWrap = document.getElementById("businessTopo").parentNode; // 画布容器DOM
    this.canvasHeight = myNetworkWrap.offsetHeight;
    console.log('拓扑数据', this.nodes, this.edges);
  },
};
</script>
<style lang="scss" scoped>
::v-deep .topt-wrap {
  .el-card__body {
    padding: 10px;
  }
  .el-collapse {
    &-item__header {
      background-color: rgba(0, 0, 0, 0);
    }
    &-item__wrap {
      background-color: rgba(0, 0, 0, 0);
    }
    &-item__content {
      padding-bottom: 0;
    }
  }
}
.topo-wrap {
  .edgesTooltip {
    position: absolute;
  }
  .edgesButton,
  .nodesButton {
    li + li {
      margin-top: 5px;
    }
  }
}
</style>
